今天來介紹 Vue 3 的 Composition API。

Vue 2 元件最大的痛點就是，相關邏輯必須被強制的拆分到不同的 Lifecycle Hooks裡頭，這裡是官方提供的說明影片，簡單來說，使用 Composition API 可以降低元件複雜度，並且把邏輯從各個 Lifecycle hooks 中抽離出來，達到高內聚、低耦合的優點。

大家在前面幾天已經認識到了 Lifecycle hooks，以及 reactivity objects，相近大家也常常注意到一個方法 setup，那麼 setup 方法是什麼？該怎麼用？

暴力點來說呢，以前寫在 data、computed、watch、methods .... 的東西現在都改寫在 setup 方法中即可。

這邊是一個簡單的元件：

<template>
  <div>
    <button @click="increase">Click</button>
    <span>{{ count }}</span>
  </div>
</template>
<script>
import { ref, watch } from 'vue'
export default {
  name: 'MyComponent',
  setup() {
    const count = ref(0)

    const increase = () => count.value += 1

    watch(count, () => {
        console.log(count.value)
    })

    return { increase, count }
  }
}
</script>

你應該已經發現，像這樣把所有東西寫在 setup 裡面，很明顯的程式很快會變得複雜且龐大，但請稍安勿躁，讓我們稍微改寫一下上面的範例，我們將它拆成兩隻程式：

useCounter.js

import { ref, watch } from 'vue'

export default function useCounter(initialNumber = 0) {
    const count = ref(initialNumber)

    const increase = () => count.value += 1

    watch(count, () => {
        console.log(count.value)
    })

    return { count, increase }
}

MyComponent.vue

<template>
  <div>
    <button @click="increase">Click</button>
    <span>{{ count }}</span>
  </div>
</template>
<script>
import useCounter from './useCounter'

export default {
  name: 'MyComponent',
  setup() {

    const { increase, count } = useCounter(0)

    return { increase, count }
  }
}
</script>

不一會兒，我們得元件乾淨許多，Counter 的邏輯也已經被放在同一隻程式裡頭，我的案例很簡單，官網有提供一個比較貼近真實的案例的複雜元件。

Composition API 就這麼簡單。